<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-input v-model="filterText" style="margin-bottom:20px;" placeholder="输入关键字进行过滤"></el-input>
            <el-tree draggable :data="data" ref="tree" node-key="id" :filter-node-method="filterNode" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-col>
        <el-col :span="18">
            <el-form ref="form" :model="form" label-width="50px" style="width:300px;">
                <el-form-item label="ID">
                    <el-input v-model="form.id" placeholder="选中树修改内容" disabled></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="form.label" placeholder="选中树修改内容"></el-input>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button type="primary" @click="edit">修改</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'Tree',
        data(){
            return {
                data: [{
                    id: 1,
                    label: '百度公司',
                    children: [{
                        id: 4,
                        label: '百度网讯',
                        children: [{
                            id: 9,
                            label: '开发部'
                        }, {
                            id: 10,
                            label: '人事部'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '腾讯公司',
                    children: [{
                        id: 5,
                        label: '运维部'
                    }, {
                        id: 6,
                        label: '测试部'
                    }]
                }, {
                    id: 3,
                    label: '字节跳动',
                    children: [{
                        id: 7,
                        label: 'AI部'
                    }, {
                        id: 8,
                        label: '抖音部'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                form: {
                    id: '',
                    label: ''
                },
                filterText: ''
            }
        },
        methods: {
            handleNodeClick(data) {
                this.form.label = data.label
                this.form.id = data.id
            },
            edit() {
                if (this.form.label) {
                    // 递归 遍历树
                    const res = this.seaTree(this.data)
                    res.label = this.form.label
                } else {
                    this.$message.error('输入不能为空！')
                }
            },
            seaTree(arr) {
                let data = {}
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].id == this.form.id) {
                        data = arr[i]
                        break
                    } else {
                        if (arr[i].children && arr[i].children.length > 0 && !data.id) {
                            data = this.seaTree(arr[i].children)
                        }
                    }
                }
                return data
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            // axios 请求示例
            // 请求网易新闻  往期回顾列表
            axios.get('/v2/article/list.do?pageNo=0&wemediaId=W8140411788237387394&size=10').then(res => {
                console.log('请求成功了')
                const arr = res.data.data.list
                console.log(arr)
            }).catch(err => {
                console.log('请求失败了')
                console.log(err)
            })

            // get 请求传参
            // axios.get('/url', { params: {  }})

            // delete 请求传参
            // axios.delete('/url', { params: {  }})

            // post 请求传参
            // axios.get('/url', { user: 'xxx', password: '***' })

            // put 请求传参
            // axios.put('/url', { user: 'xxx', password: '***' })
        }
    }
</script>

<style scoped>
    
</style>